<template>
  <div v-show="!getShowMoneyInput" ref="wrapper">
    <input 
      class="price input-style hover-style" 
      type="text" 
      :value="getTotalAmount"
      readonly 
      @click="unfoldChips"
    >
    <transition name="fade">
      <div class="chip-wrapper" v-show="showChips">
        <div class="fixed-amount box-shadow">
          <div 
            class="item button-unselected hover-style" 
            :class="activeChipIndex == index ? 'active' : ''"
            v-for="(item, index) in fixedAmount" 
            @click="useFixedAmount(item.amount, index)"
            :key="item.id">
            <span class="icon" v-show="item.icon">
              <i class="iconfont"></i>
            </span>
            <p class="number">
              {{item.amount}}
            </p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  // props: {
  //   showChips: {
  //     type: Boolean,
  //     default: false 
  //   }
  // },
  data() {
    return {
      activeChipIndex: -1,
      fixedAmount: [
        {
          id: 1,
          amount: 10,
          icon: '1'
        },
        {
          id: 2,
          amount: 20,
          icon: '1'
        },
        {
          id: 3,
          amount: 50,
          icon: '1'
        },
        {
          id: 4,
          amount: 100,
          icon: '1'
        },
        {
          id: 5,
          amount: 120,
          icon: '1'
        },
      ],
      showChips: false 
    }
  },
  mounted() {
    this.wrapper = this.$refs.wrapper
    if (this.wrapper) {
      window.addEventListener('click', (e) => {
        if (!this.wrapper.contains(e.target) ) {
          this.showChips = false 
        }
      })  
    }
  },
  destroyed() {
    // this.wrapper = this.$refs.wrapper
    if (this.wrapper) {
      window.removeEventListener('click', (e) => {
        if (!this.wrapper.contains(e.target) ) {
          this.showChips = false 
        }
      })  
    }
  },
  methods: {
    useFixedAmount(number, index) {
      this.activeChipIndex = index
      // this.setSingleAmount(number)
      this.setTotalAmount(number)
      this.showChips = false 
    },
    unfoldChips() {
      this.showChips = true 
    },
    ...mapMutations('lottery', {
      setUnitPrice: 'SET_UNIT_PRICE',
      setSingleAmount: 'SET_SINGLE_AMOUNT',
      setTotalAmount: 'SET_TOTAL_AMOUNT'
    })
  },
  computed: {
    ...mapGetters('lottery', [
      'getShowMoneyInput',
      'getUnitPrice',
      'getTotalAmount'
    ]),
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .price
    outline-style: none 
    width 60px
    height 26px
    line-height 30px
    text-align center
    border-radius 3px
  .chip-wrapper 
    z-index 101
    position absolute 
    background #fff 
    left 50%
    top -80px 
    transform translateX(-50%)
    &.fade-enter-active, &.fade-leave-active 
      tansition opacity 0.2s
    &.fade-enter, &.fade-leave-to 
      opacity 0
    .fixed-amount 
      display flex 
      flex-wrap wrap
      justify-content space-between
      width 362px
      padding 10px 
      padding-bottom 0
      box-sizing border-box 
      border-radius 3px 
      border 1px solid $color-divide-line 
      position relative 
      &:after 
        content ''
        display block 
        width 0
        height 0
        position absolute  
        border 5px solid #fff 
        border-color #fff transparent transparent transparent 
        bottom -10px 
        left 50% 
        transform translateX(-50%)
      .item
        width 60px 
        height 50px
        box-sizing border-box 
        text-align center
        margin-bottom 10px
        display flex
        flex-direction column
        justify-content center
        align-items center
        .icon 
          width 27px
          height 20px
          display inline-block
          border 1px solid red
</style>